<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.2">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"wrr123.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="文件上传 uplaodAttribute    参数 说明 类型 可选值 默认值     action 必选参数，上传的地址 string - -   headers 设置上传的请求头部 object - -   multiple 是否支持多选文件 Boolean - -   data 上传时附带的额外参数 object - -   name 上传的文件字段名 string - file   wi">
<meta property="og:type" content="article">
<meta property="og:title" content="element-ui常用组件详解">
<meta property="og:url" content="https://wrr123.github.io/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/index.html">
<meta property="og:site_name" content="一缕烟气">
<meta property="og:description" content="文件上传 uplaodAttribute    参数 说明 类型 可选值 默认值     action 必选参数，上传的地址 string - -   headers 设置上传的请求头部 object - -   multiple 是否支持多选文件 Boolean - -   data 上传时附带的额外参数 object - -   name 上传的文件字段名 string - file   wi">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/11.png">
<meta property="og:image" content="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/22.png">
<meta property="og:image" content="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/001.png">
<meta property="article:published_time" content="2020-07-01T02:06:14.000Z">
<meta property="article:modified_time" content="2022-02-18T02:52:04.397Z">
<meta property="article:author" content="田园隐士">
<meta property="article:tag" content="vuejs">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/11.png">

<link rel="canonical" href="https://wrr123.github.io/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>element-ui常用组件详解 | 一缕烟气</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="一缕烟气" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">一缕烟气</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">沧海月明珠有泪，蓝田日暖玉生烟</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          element-ui常用组件详解
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-01 10:06:14" itemprop="dateCreated datePublished" datetime="2020-07-01T10:06:14+08:00">2020-07-01</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>16k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>15 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h4 id="文件上传-uplaod"><a href="#文件上传-uplaod" class="headerlink" title="文件上传 uplaod"></a>文件上传 uplaod</h4><h5 id="Attribute"><a href="#Attribute" class="headerlink" title="Attribute"></a>Attribute</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:center">说明</th>
<th>类型</th>
<th style="text-align:center">可选值</th>
<th style="text-align:center">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">action</td>
<td style="text-align:center">必选参数，上传的地址</td>
<td>string</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">headers</td>
<td style="text-align:center">设置上传的请求头部</td>
<td>object</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">multiple</td>
<td style="text-align:center">是否支持多选文件</td>
<td>Boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">data</td>
<td style="text-align:center">上传时附带的额外参数</td>
<td>object</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:center">上传的文件字段名</td>
<td>string</td>
<td style="text-align:center">-</td>
<td style="text-align:center">file</td>
</tr>
<tr>
<td style="text-align:left">with-credentials</td>
<td style="text-align:center">支持发送cookie凭证信息</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">false</td>
</tr>
<tr>
<td style="text-align:left">show-file-list</td>
<td style="text-align:center">是否显示已上传文件列表</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">true</td>
</tr>
<tr>
<td style="text-align:left">drag</td>
<td style="text-align:center">是否启用拖拽上传</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">false</td>
</tr>
<tr>
<td style="text-align:left">accept</td>
<td style="text-align:center">接受上传的文件类型（thumbnail-mode模式下此参数无效）</td>
<td>string</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-preview</td>
<td style="text-align:center">点击文件列表中已上传文件时的钩子</td>
<td>function(file)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-remove</td>
<td style="text-align:center">文件列表移除文件时的钩子</td>
<td>function(file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-success</td>
<td style="text-align:center">文件上传成功时的钩子</td>
<td>function(response, file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-error</td>
<td style="text-align:center">文件上传失败时的钩子</td>
<td>function(err, file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-progress</td>
<td style="text-align:center">文件上传时的钩子</td>
<td>function(event, file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">before-upload</td>
<td style="text-align:center">文件上传之前的钩子，参数为上传的文件，若返回false或者返回Promise且被reject，则停止上传</td>
<td>function(file)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">before-remove</td>
<td style="text-align:center">文件删除之前的钩子，参数为上传的文件和文件列表，若返回false或者返回Promise且被reject，则停止删除</td>
<td>function(file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">list-type</td>
<td style="text-align:center">文件列表的类型</td>
<td>string</td>
<td style="text-align:center">text/picture/picture-card</td>
<td style="text-align:center">text</td>
</tr>
<tr>
<td style="text-align:left">auto-upload</td>
<td style="text-align:center">是否在选取文件之后立即进行上传</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">true</td>
</tr>
<tr>
<td style="text-align:left">file-list</td>
<td style="text-align:center">上传的文件列表</td>
<td>array</td>
<td style="text-align:center">-</td>
<td style="text-align:center">[]</td>
</tr>
<tr>
<td style="text-align:left">http-request</td>
<td style="text-align:center">覆盖默认的上传行为，可以自定义上传的实现</td>
<td>function</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:center">是否禁用</td>
<td>boolean</td>
<td style="text-align:center">-</td>
<td style="text-align:center">false</td>
</tr>
<tr>
<td style="text-align:left">limit</td>
<td style="text-align:center">最大允许上传的个数</td>
<td>number</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:left">on-exceed</td>
<td style="text-align:center">文件超出个数限制时的钩子</td>
<td>function(file, fileList)</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Slot"><a href="#Slot" class="headerlink" title="Slot"></a>Slot</h5><div class="table-container">
<table>
<thead>
<tr>
<th>name</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>trigger</td>
<td>触发文件选择框的内容</td>
</tr>
<tr>
<td>tip</td>
<td>提示说明文字</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Methods"><a href="#Methods" class="headerlink" title="Methods"></a>Methods</h5><div class="table-container">
<table>
<thead>
<tr>
<th>方法名</th>
<th>说明</th>
<th>参数</th>
</tr>
</thead>
<tbody>
<tr>
<td>clearFiles</td>
<td>清空已上传的文件列表(该方法不支持在before-uplaod中调用)</td>
<td>-</td>
</tr>
<tr>
<td>abort</td>
<td>取消上传请求</td>
<td>（file: fileList中的file对象）</td>
</tr>
<tr>
<td>submit</td>
<td>手动上传文件列表</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h4 id="Message-消息提示"><a href="#Message-消息提示" class="headerlink" title="Message 消息提示"></a>Message 消息提示</h4><p>常用于主动操作后的反馈提示。与Notification的区别是后者更多用于系统级通知的被动提醒。</p>
<h5 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h5><p>从顶部出现，3秒后自动消失</p>
<p><code>this.$message(&#39;这是一个消息提示&#39;)</code></p>
<hr>
<h4 id="分割线"><a href="#分割线" class="headerlink" title="分割线"></a>分割线</h4><h5 id="基础用法"><a href="#基础用法" class="headerlink" title="基础用法"></a>基础用法</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-divider</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="设置文案"><a href="#设置文案" class="headerlink" title="设置文案"></a>设置文案</h5><p>可以在分割线上自定义文案内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>头上一片晴天，心中一个想念<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">content-position</span>=<span class="string">&quot;left&quot;</span>&gt;</span>少年包青天<span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>饿了别叫妈, 叫饿了么<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;el-icon-mobile-phone&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>为了无法计算的价值<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">content-position</span>=<span class="string">&quot;right&quot;</span>&gt;</span>阿里云<span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="垂直分割"><a href="#垂直分割" class="headerlink" title="垂直分割"></a>垂直分割</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>雨纷纷<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">direction</span>=<span class="string">&quot;vertical&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>旧故里<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-divider</span> <span class="attr">direction</span>=<span class="string">&quot;vertical&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-divider</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>草木深<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="divider-attributes"><a href="#divider-attributes" class="headerlink" title="divider attributes"></a>divider attributes</h4><div class="table-container">
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>direction</td>
<td>设置分割线方向</td>
<td>string</td>
<td>horizontal、vertical</td>
<td>horizontal</td>
</tr>
<tr>
<td>content-position</td>
<td>设置分割线文案的位置</td>
<td>string</td>
<td>left/right/center</td>
<td>center</td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4 id="Form表单"><a href="#Form表单" class="headerlink" title="Form表单"></a>Form表单</h4><h5 id="典型表单"><a href="#典型表单" class="headerlink" title="典型表单"></a>典型表单</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-form ref=&quot;form&quot; :model=&quot;form&quot; label-width=&quot;80px&quot;&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动名称&quot;&gt;</span><br><span class="line">    &lt;el-input v-model=&quot;form.name&quot;&gt;&lt;/el-input&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动区域&quot;&gt;</span><br><span class="line">    &lt;el-select v-model=&quot;form.region&quot; placeholder=&quot;请选择活动区域&quot;&gt;</span><br><span class="line">      &lt;el-option label=&quot;区域一&quot; value=&quot;shanghai&quot;&gt;&lt;/el-option&gt;</span><br><span class="line">      &lt;el-option label=&quot;区域二&quot; value=&quot;beijing&quot;&gt;&lt;/el-option&gt;</span><br><span class="line">    &lt;/el-select&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动时间&quot;&gt;</span><br><span class="line">    &lt;el-col :span=&quot;11&quot;&gt;</span><br><span class="line">      &lt;el-date-picker type=&quot;date&quot; placeholder=&quot;选择日期&quot; v-model=&quot;form.date1&quot; style=&quot;width: 100%;&quot;&gt;&lt;/el-date-picker&gt;</span><br><span class="line">    &lt;/el-col&gt;</span><br><span class="line">    &lt;el-col class=&quot;line&quot; :span=&quot;2&quot;&gt;-&lt;/el-col&gt;</span><br><span class="line">    &lt;el-col :span=&quot;11&quot;&gt;</span><br><span class="line">      &lt;el-time-picker placeholder=&quot;选择时间&quot; v-model=&quot;form.date2&quot; style=&quot;width: 100%;&quot;&gt;&lt;/el-time-picker&gt;</span><br><span class="line">    &lt;/el-col&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;即时配送&quot;&gt;</span><br><span class="line">    &lt;el-switch v-model=&quot;form.delivery&quot;&gt;&lt;/el-switch&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动性质&quot;&gt;</span><br><span class="line">    &lt;el-checkbox-group v-model=&quot;form.type&quot;&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;美食/餐厅线上活动&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;地推活动&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;线下主题活动&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">      &lt;el-checkbox label=&quot;单纯品牌曝光&quot; name=&quot;type&quot;&gt;&lt;/el-checkbox&gt;</span><br><span class="line">    &lt;/el-checkbox-group&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;特殊资源&quot;&gt;</span><br><span class="line">    &lt;el-radio-group v-model=&quot;form.resource&quot;&gt;</span><br><span class="line">      &lt;el-radio label=&quot;线上品牌商赞助&quot;&gt;&lt;/el-radio&gt;</span><br><span class="line">      &lt;el-radio label=&quot;线下场地免费&quot;&gt;&lt;/el-radio&gt;</span><br><span class="line">    &lt;/el-radio-group&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item label=&quot;活动形式&quot;&gt;</span><br><span class="line">    &lt;el-input type=&quot;textarea&quot; v-model=&quot;form.desc&quot;&gt;&lt;/el-input&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">  &lt;el-form-item&gt;</span><br><span class="line">    &lt;el-button type=&quot;primary&quot; @click=&quot;onSubmit&quot;&gt;立即创建&lt;/el-button&gt;</span><br><span class="line">    &lt;el-button&gt;取消&lt;/el-button&gt;</span><br><span class="line">  &lt;/el-form-item&gt;</span><br><span class="line">&lt;/el-form&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        form: &#123;</span><br><span class="line">          name: &#x27;&#x27;,</span><br><span class="line">          region: &#x27;&#x27;,</span><br><span class="line">          date1: &#x27;&#x27;,</span><br><span class="line">          date2: &#x27;&#x27;,</span><br><span class="line">          delivery: false,</span><br><span class="line">          type: [],</span><br><span class="line">          resource: &#x27;&#x27;,</span><br><span class="line">          desc: &#x27;&#x27;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      onSubmit() &#123;</span><br><span class="line">        console.log(&#x27;submit!&#x27;);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h4 id="DatePicker-时间选择器"><a href="#DatePicker-时间选择器" class="headerlink" title="DatePicker 时间选择器"></a>DatePicker 时间选择器</h4><p>用于选择或输入日期</p>
<h5 id="日期格式"><a href="#日期格式" class="headerlink" title="日期格式"></a>日期格式</h5><p>使用<code>format</code>属性指定输入框的格式；使用<code>value-format</code>指定绑定值的格式。</p>
<p><strong>请区分大小写</strong></p>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">格式</th>
<th style="text-align:left">含义</th>
<th style="text-align:left">备注</th>
<th style="text-align:left">举例</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>yyyy</code></td>
<td style="text-align:left">年</td>
<td style="text-align:left"></td>
<td style="text-align:left">2017</td>
</tr>
<tr>
<td style="text-align:left"><code>M</code></td>
<td style="text-align:left">月</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">1</td>
</tr>
<tr>
<td style="text-align:left"><code>MM</code></td>
<td style="text-align:left">月</td>
<td style="text-align:left"></td>
<td style="text-align:left">01</td>
</tr>
<tr>
<td style="text-align:left"><code>W</code></td>
<td style="text-align:left">周</td>
<td style="text-align:left">仅周选择器的 <code>format</code> 可用；不补0</td>
<td style="text-align:left">1</td>
</tr>
<tr>
<td style="text-align:left"><code>WW</code></td>
<td style="text-align:left">周</td>
<td style="text-align:left">仅周选择器的 <code>format</code> 可用</td>
<td style="text-align:left">01</td>
</tr>
<tr>
<td style="text-align:left"><code>d</code></td>
<td style="text-align:left">日</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">2</td>
</tr>
<tr>
<td style="text-align:left"><code>dd</code></td>
<td style="text-align:left">日</td>
<td style="text-align:left"></td>
<td style="text-align:left">02</td>
</tr>
<tr>
<td style="text-align:left"><code>H</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">24小时制；不补0</td>
<td style="text-align:left">3</td>
</tr>
<tr>
<td style="text-align:left"><code>HH</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">24小时制</td>
<td style="text-align:left">03</td>
</tr>
<tr>
<td style="text-align:left"><code>h</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">12小时制，须和 <code>A</code> 或 <code>a</code> 使用；不补0</td>
<td style="text-align:left">3</td>
</tr>
<tr>
<td style="text-align:left"><code>hh</code></td>
<td style="text-align:left">小时</td>
<td style="text-align:left">12小时制，须和 <code>A</code> 或 <code>a</code> 使用</td>
<td style="text-align:left">03</td>
</tr>
<tr>
<td style="text-align:left"><code>m</code></td>
<td style="text-align:left">分钟</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">4</td>
</tr>
<tr>
<td style="text-align:left"><code>mm</code></td>
<td style="text-align:left">分钟</td>
<td style="text-align:left"></td>
<td style="text-align:left">04</td>
</tr>
<tr>
<td style="text-align:left"><code>s</code></td>
<td style="text-align:left">秒</td>
<td style="text-align:left">不补0</td>
<td style="text-align:left">5</td>
</tr>
<tr>
<td style="text-align:left"><code>ss</code></td>
<td style="text-align:left">秒</td>
<td style="text-align:left"></td>
<td style="text-align:left">05</td>
</tr>
<tr>
<td style="text-align:left"><code>A</code></td>
<td style="text-align:left">AM/PM</td>
<td style="text-align:left">仅 <code>format</code> 可用，大写</td>
<td style="text-align:left">AM</td>
</tr>
<tr>
<td style="text-align:left"><code>a</code></td>
<td style="text-align:left">am/pm</td>
<td style="text-align:left">仅 <code>format</code> 可用，小写</td>
<td style="text-align:left">am</td>
</tr>
<tr>
<td style="text-align:left"><code>timestamp</code></td>
<td style="text-align:left">JS时间戳</td>
<td style="text-align:left">仅 <code>value-format</code> 可用；组件绑定值为<code>number</code>类型</td>
<td style="text-align:left">1483326245000</td>
</tr>
<tr>
<td style="text-align:left"><code>[MM]</code></td>
<td style="text-align:left">不需要格式化字符</td>
<td style="text-align:left">使用方括号标识不需要格式化的字符 (如 [A] [MM])</td>
<td style="text-align:left">MM</td>
</tr>
</tbody>
</table>
</div>
<h4 id="Loading加载"><a href="#Loading加载" class="headerlink" title="Loading加载"></a>Loading加载</h4><p>加载数据时显示功效</p>
<h5 id="加载方式"><a href="#加载方式" class="headerlink" title="加载方式"></a>加载方式</h5><ul>
<li><p>指令加载</p>
<p><img src="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/11.png" alt></p>
</li>
<li><p>服务加载</p>
<p><img src="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/22.png" alt></p>
</li>
</ul>
<h4 id="Switch-开关"><a href="#Switch-开关" class="headerlink" title="Switch 开关"></a>Switch 开关</h4><h5 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h5><p>绑定 <code>v-model</code> 到一个 <code>Boolean</code> 类型的变量。可以使用 <code>active-color</code> 属性与 <code>inactive-color</code> 属性来设置开关的背景颜色。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value2&quot;</span><br><span class="line">  active-color=&quot;#13ce66&quot;</span><br><span class="line">  inactive-color=&quot;#ff4949&quot;         </span><br><span class="line">  &gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">      data () &#123;</span><br><span class="line">          return &#123;</span><br><span class="line">              value1: true,</span><br><span class="line">              value2: true</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="文字描述"><a href="#文字描述" class="headerlink" title="文字描述"></a>文字描述</h5><p>使用 <code>active-text</code> 属性与 <code>inactive-text</code> 属性来设置开关的文字描述。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value3&quot;</span><br><span class="line">  active-text=&quot;按月付费&quot;</span><br><span class="line">  inactive-text=&quot;按年付费&quot;&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line">&lt;el-switch</span><br><span class="line">  style=&quot;display: block&quot;</span><br><span class="line">  v-model=&quot;value4&quot;</span><br><span class="line">  active-color=&quot;#13ce66&quot;</span><br><span class="line">  inactive-color=&quot;#ff4949&quot;</span><br><span class="line">  active-text=&quot;按月付费&quot;</span><br><span class="line">  inactive-text=&quot;按年付费&quot;&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        value3: true,</span><br><span class="line">        value4: true</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="扩展的-value-类型"><a href="#扩展的-value-类型" class="headerlink" title="扩展的 value 类型"></a>扩展的 value 类型</h5><p>设置 <code>active-value</code> 与 <code>inactive-value</code> 属性，接受 <code>Boolean</code>, <code>String</code> 或 <code>Number</code> 类型的值。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tooltip :content=&quot;&#x27;Switch value: &#x27; + value5&quot; placement=&quot;top&quot;&gt;</span><br><span class="line">  &lt;el-switch</span><br><span class="line">    v-model=&quot;value5&quot;</span><br><span class="line">    active-color=&quot;#13ce66&quot;</span><br><span class="line">    inactive-color=&quot;#ff4949&quot;</span><br><span class="line">    active-value=&quot;100&quot;</span><br><span class="line">    inactive-value=&quot;0&quot;&gt;</span><br><span class="line">  &lt;/el-switch&gt;</span><br><span class="line">&lt;/el-tooltip&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        value5: &#x27;100&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="禁用状态"><a href="#禁用状态" class="headerlink" title="禁用状态"></a>禁用状态</h5><p>设置 <code>disabled</code> 属性，接受一个 <code>Boolean</code> ,设置 <code>true</code> 即可禁用。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value6&quot;</span><br><span class="line">  disabled&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line">&lt;el-switch</span><br><span class="line">  v-model=&quot;value7&quot;</span><br><span class="line">  disabled&gt;</span><br><span class="line">&lt;/el-switch&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        value6: true,</span><br><span class="line">        value7: false</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="Attributes"><a href="#Attributes" class="headerlink" title="Attributes"></a>Attributes</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">可选值</th>
<th style="text-align:left">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:left">是否禁用</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">width</td>
<td style="text-align:left">switch 的宽度（像素）</td>
<td style="text-align:left">number</td>
<td style="text-align:left">—</td>
<td style="text-align:left">40</td>
</tr>
<tr>
<td style="text-align:left">active-icon-class</td>
<td style="text-align:left">switch 打开时所显示图标的类名，设置此项会忽略 <code>active-text</code></td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">inactive-icon-class</td>
<td style="text-align:left">switch 关闭时所显示图标的类名，设置此项会忽略 <code>inactive-text</code></td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">active-text</td>
<td style="text-align:left">switch 打开时的文字描述</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">inactive-text</td>
<td style="text-align:left">switch 关闭时的文字描述</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">active-value</td>
<td style="text-align:left">switch 打开时的值</td>
<td style="text-align:left">boolean / string / number</td>
<td style="text-align:left">—</td>
<td style="text-align:left">true</td>
</tr>
<tr>
<td style="text-align:left">inactive-value</td>
<td style="text-align:left">switch 关闭时的值</td>
<td style="text-align:left">boolean / string / number</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">active-color</td>
<td style="text-align:left">switch 打开时的背景色</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">#409EFF</td>
</tr>
<tr>
<td style="text-align:left">inactive-color</td>
<td style="text-align:left">switch 关闭时的背景色</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">#C0CCDA</td>
</tr>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:left">switch 对应的 name 属性</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Events"><a href="#Events" class="headerlink" title="Events"></a>Events</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">事件名称</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">change</td>
<td style="text-align:left">switch 状态发生变化时的回调函数</td>
<td style="text-align:left">新状态的值</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Methods-1"><a href="#Methods-1" class="headerlink" title="Methods"></a>Methods</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">方法名</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">focus</td>
<td style="text-align:left">使 Switch 获取焦点</td>
<td style="text-align:left">-</td>
</tr>
</tbody>
</table>
</div>
<h4 id="Tabs-标签页"><a href="#Tabs-标签页" class="headerlink" title="Tabs 标签页"></a>Tabs 标签页</h4><p>分割内容上有关联但属于不同类别的数据集合。</p>
<h5 id="基础用法-1"><a href="#基础用法-1" class="headerlink" title="基础用法"></a>基础用法</h5><p>基础的、简洁的标签页。</p>
<p>一个栗子</p>
<p><strong>Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 <code>value</code> 属性来指定当前选中的标签页。</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;el-tabs v-model=&quot;activeName&quot; @tab-click=&quot;handleClick&quot;&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;用户管理&quot; name=&quot;first&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;配置管理&quot; name=&quot;second&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;角色管理&quot; name=&quot;third&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;定时任务补偿&quot; name=&quot;fourth&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;/el-tabs&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        activeName: &#x27;second&#x27;</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      handleClick(tab, event) &#123;</span><br><span class="line">        console.log(tab, event);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="选项卡样式"><a href="#选项卡样式" class="headerlink" title="选项卡样式"></a>选项卡样式</h5><p>选项卡样式的标签页</p>
<p><strong>只需要设置 <code>type</code> 属性为 <code>card</code> 就可以使选项卡改变为标签风格。</strong></p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;el-tabs v-model=&quot;activeName2&quot; type=&quot;card&quot; @tab-click=&quot;handleClick&quot;&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;用户管理&quot; name=&quot;first&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;配置管理&quot; name=&quot;second&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;角色管理&quot; name=&quot;third&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;定时任务补偿&quot; name=&quot;fourth&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;/el-tabs&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        activeName2: &#x27;first&#x27;</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      handleClick(tab, event) &#123;</span><br><span class="line">        console.log(tab, event);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="卡片化"><a href="#卡片化" class="headerlink" title="卡片化"></a>卡片化</h5><p>卡片化的标签。</p>
<p><strong>将 <code>type</code> 设置为 <code>border-card</code> 。</strong></p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tabs type=&quot;border-card&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;用户管理&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;配置管理&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;角色管理&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;定时任务补偿&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br></pre></td></tr></table></figure>
<h5 id="位置"><a href="#位置" class="headerlink" title="位置"></a>位置</h5><p>可以通过 <code>top-position</code> 设置标签的位置。</p>
<p><strong>标签一共有四个方向的设置 <code>tabPosition=&quot;left|right|top|bottom&quot;</code></strong></p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;el-radio-group v-model=&quot;tabPosition&quot; style=&quot;margin-bottom: 30px;&quot;&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;top&quot;&gt;top&lt;/el-radio-button&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;right&quot;&gt;right&lt;/el-radio-button&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;bottom&quot;&gt;bottom&lt;/el-radio-button&gt;</span><br><span class="line">    &lt;el-radio-button label=&quot;left&quot;&gt;left&lt;/el-radio-button&gt;</span><br><span class="line">  &lt;/el-radio-group&gt;</span><br><span class="line"></span><br><span class="line">  &lt;el-tabs :tab-position=&quot;tabPosition&quot; style=&quot;height: 200px;&quot;&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;用户管理&quot;&gt;用户管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;配置管理&quot;&gt;配置管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;角色管理&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">    &lt;el-tab-pane label=&quot;定时任务补偿&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;/el-tabs&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        tabPosition: &#x27;top&#x27;</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="自定义标签页"><a href="#自定义标签页" class="headerlink" title="自定义标签页"></a>自定义标签页</h5><p>可以通过具名 <code>slot</code> 来实现自定义标签页的内容。</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tabs type=&quot;border-card&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane&gt;</span><br><span class="line">    &lt;span slot=&quot;label&quot;&gt;&lt;i class=&quot;el-icon-date&quot;&gt;&lt;/i&gt; 我的行程&lt;/span&gt;</span><br><span class="line">    我的行程</span><br><span class="line">  &lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;消息中心&quot;&gt;消息中心&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;角色管理&quot;&gt;角色管理&lt;/el-tab-pane&gt;</span><br><span class="line">  &lt;el-tab-pane label=&quot;定时任务补偿&quot;&gt;定时任务补偿&lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br></pre></td></tr></table></figure>
<p><img src="http://localhost:4000/2020/07/01/element-ui%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/001.png" alt></p>
<h5 id="动态增减标签页"><a href="#动态增减标签页" class="headerlink" title="动态增减标签页"></a>动态增减标签页</h5><p>增减标签页按钮只能在选项卡样式的标签下使用</p>
<p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tabs v-model=&quot;editableTabsValue&quot; type=&quot;card&quot; editable @edit=&quot;handleTabsEdit&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane</span><br><span class="line">    :key=&quot;item.name&quot;</span><br><span class="line">    v-for=&quot;(item, index) in editableTabs&quot;</span><br><span class="line">    :label=&quot;item.title&quot;</span><br><span class="line">    :name=&quot;item.name&quot;</span><br><span class="line">  &gt;</span><br><span class="line">    &#123;&#123;item.content&#125;&#125;</span><br><span class="line">  &lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        editableTabsValue: &#x27;2&#x27;,</span><br><span class="line">        editableTabs: [&#123;</span><br><span class="line">          title: &#x27;Tab 1&#x27;,</span><br><span class="line">          name: &#x27;1&#x27;,</span><br><span class="line">          content: &#x27;Tab 1 content&#x27;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          title: &#x27;Tab 2&#x27;,</span><br><span class="line">          name: &#x27;2&#x27;,</span><br><span class="line">          content: &#x27;Tab 2 content&#x27;</span><br><span class="line">        &#125;],</span><br><span class="line">        tabIndex: 2</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      handleTabsEdit(targetName, action) &#123;</span><br><span class="line">        if (action === &#x27;add&#x27;) &#123;</span><br><span class="line">          let newTabName = ++this.tabIndex + &#x27;&#x27;;</span><br><span class="line">          this.editableTabs.push(&#123;</span><br><span class="line">            title: &#x27;New Tab&#x27;,</span><br><span class="line">            name: newTabName,</span><br><span class="line">            content: &#x27;New Tab content&#x27;</span><br><span class="line">          &#125;);</span><br><span class="line">          this.editableTabsValue = newTabName;</span><br><span class="line">        &#125;</span><br><span class="line">        if (action === &#x27;remove&#x27;) &#123;</span><br><span class="line">          let tabs = this.editableTabs;</span><br><span class="line">          let activeName = this.editableTabsValue;</span><br><span class="line">          if (activeName === targetName) &#123;</span><br><span class="line">            tabs.forEach((tab, index) =&gt; &#123;</span><br><span class="line">              if (tab.name === targetName) &#123;</span><br><span class="line">                let nextTab = tabs[index + 1] || tabs[index - 1];</span><br><span class="line">                if (nextTab) &#123;</span><br><span class="line">                  activeName = nextTab.name;</span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;);</span><br><span class="line">          &#125;</span><br><span class="line">          </span><br><span class="line">          this.editableTabsValue = activeName;</span><br><span class="line">          this.editableTabs = tabs.filter(tab =&gt; tab.name !== targetName);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="自定义增加标签页触发器"><a href="#自定义增加标签页触发器" class="headerlink" title="自定义增加标签页触发器"></a>自定义增加标签页触发器</h5><p>一个栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line">&lt;div style=&quot;margin-bottom: 20px;&quot;&gt;</span><br><span class="line">  &lt;el-button</span><br><span class="line">    size=&quot;small&quot;</span><br><span class="line">    @click=&quot;addTab(editableTabsValue2)&quot;</span><br><span class="line">  &gt;</span><br><span class="line">    add tab</span><br><span class="line">  &lt;/el-button&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;el-tabs v-model=&quot;editableTabsValue2&quot; type=&quot;card&quot; closable @tab-remove=&quot;removeTab&quot;&gt;</span><br><span class="line">  &lt;el-tab-pane</span><br><span class="line">    v-for=&quot;(item, index) in editableTabs2&quot;</span><br><span class="line">    :key=&quot;item.name&quot;</span><br><span class="line">    :label=&quot;item.title&quot;</span><br><span class="line">    :name=&quot;item.name&quot;</span><br><span class="line">  &gt;</span><br><span class="line">    &#123;&#123;item.content&#125;&#125;</span><br><span class="line">  &lt;/el-tab-pane&gt;</span><br><span class="line">&lt;/el-tabs&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        editableTabsValue2: &#x27;2&#x27;,</span><br><span class="line">        editableTabs2: [&#123;</span><br><span class="line">          title: &#x27;Tab 1&#x27;,</span><br><span class="line">          name: &#x27;1&#x27;,</span><br><span class="line">          content: &#x27;Tab 1 content&#x27;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          title: &#x27;Tab 2&#x27;,</span><br><span class="line">          name: &#x27;2&#x27;,</span><br><span class="line">          content: &#x27;Tab 2 content&#x27;</span><br><span class="line">        &#125;],</span><br><span class="line">        tabIndex: 2</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      addTab(targetName) &#123;</span><br><span class="line">        let newTabName = ++this.tabIndex + &#x27;&#x27;;</span><br><span class="line">        this.editableTabs2.push(&#123;</span><br><span class="line">          title: &#x27;New Tab&#x27;,</span><br><span class="line">          name: newTabName,</span><br><span class="line">          content: &#x27;New Tab content&#x27;</span><br><span class="line">        &#125;);</span><br><span class="line">        this.editableTabsValue2 = newTabName;</span><br><span class="line">      &#125;,</span><br><span class="line">      removeTab(targetName) &#123;</span><br><span class="line">        let tabs = this.editableTabs2;</span><br><span class="line">        let activeName = this.editableTabsValue2;</span><br><span class="line">        if (activeName === targetName) &#123;</span><br><span class="line">          tabs.forEach((tab, index) =&gt; &#123;</span><br><span class="line">            if (tab.name === targetName) &#123;</span><br><span class="line">              let nextTab = tabs[index + 1] || tabs[index - 1];</span><br><span class="line">              if (nextTab) &#123;</span><br><span class="line">                activeName = nextTab.name;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        this.editableTabsValue2 = activeName;</span><br><span class="line">        this.editableTabs2 = tabs.filter(tab =&gt; tab.name !== targetName);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="Tabs-Attributes"><a href="#Tabs-Attributes" class="headerlink" title="Tabs Attributes"></a>Tabs Attributes</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">可选值</th>
<th style="text-align:left">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">type</td>
<td style="text-align:left">风格类型</td>
<td style="text-align:left">string</td>
<td style="text-align:left">card/border-card</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">closable</td>
<td style="text-align:left">标签是否可关闭</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">addable</td>
<td style="text-align:left">标签是否可增加</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">editable</td>
<td style="text-align:left">标签是否同时可增加和关闭</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">value</td>
<td style="text-align:left">绑定值，选中选项卡的 name</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">第一个选项卡的 name</td>
</tr>
<tr>
<td style="text-align:left">tab-position</td>
<td style="text-align:left">选项卡所在位置</td>
<td style="text-align:left">string</td>
<td style="text-align:left">top/right/bottom/left</td>
<td style="text-align:left">top</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Tabs-Events"><a href="#Tabs-Events" class="headerlink" title="Tabs Events"></a>Tabs Events</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">事件名称</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">tab-click</td>
<td style="text-align:left">tab 被选中时触发</td>
<td style="text-align:left">被选中的标签 tab 实例</td>
</tr>
<tr>
<td style="text-align:left">tab-remove</td>
<td style="text-align:left">点击 tab 移除按钮后触发</td>
<td style="text-align:left">被删除的标签的 name</td>
</tr>
<tr>
<td style="text-align:left">tab-add</td>
<td style="text-align:left">点击 tabs 的新增按钮后触发</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">edit</td>
<td style="text-align:left">点击 tabs 的新增按钮或 tab 被关闭后触发</td>
<td style="text-align:left">(targetName, action)</td>
</tr>
</tbody>
</table>
</div>
<h5 id="Tab-pane-Attribute"><a href="#Tab-pane-Attribute" class="headerlink" title="Tab-pane Attribute"></a>Tab-pane Attribute</h5><div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">可选值</th>
<th style="text-align:left">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">label</td>
<td style="text-align:left">选项卡标题</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">—</td>
</tr>
<tr>
<td style="text-align:left">disabled</td>
<td style="text-align:left">是否禁用</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:left">与选项卡 activeName 对应的标识符，表示选项卡别名</td>
<td style="text-align:left">string</td>
<td style="text-align:left">—</td>
<td style="text-align:left">该选项卡在选项卡列表中的顺序值，如第一个选项卡则为’1’</td>
</tr>
<tr>
<td style="text-align:left">closable</td>
<td style="text-align:left">标签是否可关闭</td>
<td style="text-align:left">boolean</td>
<td style="text-align:left">—</td>
<td style="text-align:left">false</td>
</tr>
</tbody>
</table>
</div>
<h4 id="el-input-输入框"><a href="#el-input-输入框" class="headerlink" title="el-input 输入框"></a>el-input 输入框</h4><p>通过鼠标或键盘输入字符</p>
<h5 id="带-icon-的输入框"><a href="#带-icon-的输入框" class="headerlink" title="带 icon 的输入框"></a>带 icon 的输入框</h5><blockquote>
<p><strong>可以通过 <code>prefix-icon</code> 和 <code>suffix-icon</code> 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。</strong></p>
</blockquote>
<h6 id="使用属性方式"><a href="#使用属性方式" class="headerlink" title="使用属性方式"></a>使用属性方式</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;demo-input-suffix&quot;&gt;</span><br><span class="line">  属性方式：</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请选择日期&quot;</span><br><span class="line">    suffix-icon=&quot;el-icon-date&quot;</span><br><span class="line">    v-model=&quot;input1&quot;&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请输入内容&quot;</span><br><span class="line">    prefix-icon=&quot;el-icon-search&quot;</span><br><span class="line">    v-model=&quot;input2&quot;&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h6 id="使用-slot-方式"><a href="#使用-slot-方式" class="headerlink" title="使用 slot 方式"></a>使用 slot 方式</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;demo-input-suffix&quot;&gt;</span><br><span class="line">  slot 方式：</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请选择日期&quot;</span><br><span class="line">    v-model=&quot;input3&quot;&gt;</span><br><span class="line">    &lt;i slot=&quot;suffix&quot; class=&quot;el-input__icon el-icon-date&quot;&gt;&lt;/i&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">  &lt;el-input</span><br><span class="line">    placeholder=&quot;请输入内容&quot;</span><br><span class="line">    v-model=&quot;input4&quot;&gt;</span><br><span class="line">    &lt;i slot=&quot;prefix&quot; class=&quot;el-input__icon el-icon-search&quot;&gt;&lt;/i&gt;</span><br><span class="line">  &lt;/el-input&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h4 id="layout-布局"><a href="#layout-布局" class="headerlink" title="layout 布局"></a>layout 布局</h4><p>通过 row 和 col 组件，并通过 col 组件的 <code>span</code> 属性，我们就可以自由的组合布局.<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">&quot;12&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">&quot;12&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">el-row</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>常用的一些属性介绍：</p>
<ul>
<li><p>分栏间隔</p>
<p>row 组件提供 <code>gutter</code> 属性来指定每一栏之间的间隔，默认间隔为 0 。</p>
</li>
<li><p>分栏偏移 支持偏移指定的栏数</p>
<p>通过制定 col 组件的 <code>offset</code> 属性可以指定分栏偏离的栏数。</p>
</li>
<li><p>对齐方式 通过 <code>flex</code> 布局来对分栏进行灵活的对齐   </p>
<p>将 <code>type</code> 属性赋值为 ‘flex’, 可以启用 flex 布局，并可通过 <code>justify</code> 属性来指定 ‘start, center, end, space-between, space-around’ 其中的值来定义子元素的排版方式。</p>
</li>
<li><p>响应式布局   </p>
<p>参照了 Bootstrap 的响应式设计，预设了五个响应尺寸，<code>xs, sm, md, lg, 和 xl</code> 。</p>
</li>
</ul>

    </div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/vuejs/" rel="tag"># vuejs</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/07/01/vuejs%E5%B8%B8%E7%94%A8api/" rel="prev" title="vuejs常用api">
      <i class="fa fa-chevron-left"></i> vuejs常用api
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/07/01/faq-java/" rel="next" title="faq-java">
      faq-java <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0-uplaod"><span class="nav-number">1.</span> <span class="nav-text">文件上传 uplaod</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#Attribute"><span class="nav-number">1.1.</span> <span class="nav-text">Attribute</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Slot"><span class="nav-number">1.2.</span> <span class="nav-text">Slot</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Methods"><span class="nav-number">1.3.</span> <span class="nav-text">Methods</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Message-%E6%B6%88%E6%81%AF%E6%8F%90%E7%A4%BA"><span class="nav-number">2.</span> <span class="nav-text">Message 消息提示</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="nav-number">2.1.</span> <span class="nav-text">基本使用</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%86%E5%89%B2%E7%BA%BF"><span class="nav-number">3.</span> <span class="nav-text">分割线</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95"><span class="nav-number">3.1.</span> <span class="nav-text">基础用法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E6%96%87%E6%A1%88"><span class="nav-number">3.2.</span> <span class="nav-text">设置文案</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9E%82%E7%9B%B4%E5%88%86%E5%89%B2"><span class="nav-number">3.3.</span> <span class="nav-text">垂直分割</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#divider-attributes"><span class="nav-number">4.</span> <span class="nav-text">divider attributes</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Form%E8%A1%A8%E5%8D%95"><span class="nav-number">5.</span> <span class="nav-text">Form表单</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%85%B8%E5%9E%8B%E8%A1%A8%E5%8D%95"><span class="nav-number">5.1.</span> <span class="nav-text">典型表单</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DatePicker-%E6%97%B6%E9%97%B4%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">6.</span> <span class="nav-text">DatePicker 时间选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F"><span class="nav-number">6.1.</span> <span class="nav-text">日期格式</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Loading%E5%8A%A0%E8%BD%BD"><span class="nav-number">7.</span> <span class="nav-text">Loading加载</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%8A%A0%E8%BD%BD%E6%96%B9%E5%BC%8F"><span class="nav-number">7.1.</span> <span class="nav-text">加载方式</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Switch-%E5%BC%80%E5%85%B3"><span class="nav-number">8.</span> <span class="nav-text">Switch 开关</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95"><span class="nav-number">8.1.</span> <span class="nav-text">基本用法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%96%87%E5%AD%97%E6%8F%8F%E8%BF%B0"><span class="nav-number">8.2.</span> <span class="nav-text">文字描述</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%89%A9%E5%B1%95%E7%9A%84-value-%E7%B1%BB%E5%9E%8B"><span class="nav-number">8.3.</span> <span class="nav-text">扩展的 value 类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%A6%81%E7%94%A8%E7%8A%B6%E6%80%81"><span class="nav-number">8.4.</span> <span class="nav-text">禁用状态</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Attributes"><span class="nav-number">8.5.</span> <span class="nav-text">Attributes</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Events"><span class="nav-number">8.6.</span> <span class="nav-text">Events</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Methods-1"><span class="nav-number">8.7.</span> <span class="nav-text">Methods</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Tabs-%E6%A0%87%E7%AD%BE%E9%A1%B5"><span class="nav-number">9.</span> <span class="nav-text">Tabs 标签页</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95-1"><span class="nav-number">9.1.</span> <span class="nav-text">基础用法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E9%80%89%E9%A1%B9%E5%8D%A1%E6%A0%B7%E5%BC%8F"><span class="nav-number">9.2.</span> <span class="nav-text">选项卡样式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%8D%A1%E7%89%87%E5%8C%96"><span class="nav-number">9.3.</span> <span class="nav-text">卡片化</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E4%BD%8D%E7%BD%AE"><span class="nav-number">9.4.</span> <span class="nav-text">位置</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%87%E7%AD%BE%E9%A1%B5"><span class="nav-number">9.5.</span> <span class="nav-text">自定义标签页</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E5%A2%9E%E5%87%8F%E6%A0%87%E7%AD%BE%E9%A1%B5"><span class="nav-number">9.6.</span> <span class="nav-text">动态增减标签页</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A2%9E%E5%8A%A0%E6%A0%87%E7%AD%BE%E9%A1%B5%E8%A7%A6%E5%8F%91%E5%99%A8"><span class="nav-number">9.7.</span> <span class="nav-text">自定义增加标签页触发器</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Tabs-Attributes"><span class="nav-number">9.8.</span> <span class="nav-text">Tabs Attributes</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Tabs-Events"><span class="nav-number">9.9.</span> <span class="nav-text">Tabs Events</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Tab-pane-Attribute"><span class="nav-number">9.10.</span> <span class="nav-text">Tab-pane Attribute</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#el-input-%E8%BE%93%E5%85%A5%E6%A1%86"><span class="nav-number">10.</span> <span class="nav-text">el-input 输入框</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B8%A6-icon-%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86"><span class="nav-number">10.1.</span> <span class="nav-text">带 icon 的输入框</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E5%B1%9E%E6%80%A7%E6%96%B9%E5%BC%8F"><span class="nav-number">10.1.1.</span> <span class="nav-text">使用属性方式</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-slot-%E6%96%B9%E5%BC%8F"><span class="nav-number">10.1.2.</span> <span class="nav-text">使用 slot 方式</span></a></li></ol></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#layout-%E5%B8%83%E5%B1%80"><span class="nav-number">11.</span> <span class="nav-text">layout 布局</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">田园隐士</p>
  <div class="site-description" itemprop="description">talk is cheap, show me the code</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">347</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">53</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">115</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">田园隐士</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">587k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">8:53</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

  

</body>
</html>
